<!-- 分红规则 -->
<template>
	<div >
	    <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
	        <el-form-item label="规则名称：">
	            <el-input placeholder="请输入分红结算规则" v-model.trim="ruleForm.name" maxlength="20"></el-input>
	        </el-form-item>
	        <el-form-item>
	            <el-button type="primary" @click="searchList" id="monitorEnter">查询</el-button>
	            <el-button type="primary"  @click="add">新增</el-button>
	         </el-form-item>
	    </el-form>
	    <el-table :data="tableData" border>
	        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
	        <el-table-column label="规则名称" prop="name" align="center"></el-table-column>
	        <el-table-column label="计算类型" prop="type"  align="center">
	        	<template slot-scope="scope">
	        		{{scope.row.type== 1? '利润率':'利润额'}}
	        	</template>
	        </el-table-column>
	        <el-table-column label="区间设置" prop="calBaseProportion" align="center">
	        	<template slot-scope="scope">
	        		<el-button type="text" @click="operation('lookinterval',scope.row)">查看</el-button>
	        	</template>
	        </el-table-column>
	        <el-table-column label="版本号" prop="version" align="center" ></el-table-column>
	        <el-table-column label="更新人" prop="updateUsername" align="center"></el-table-column>
	        <el-table-column label="更新时间" prop="updateTime" align="center">
	        </el-table-column>
	        <el-table-column label="状态" prop="status" align="center">
	        	<template slot-scope="scope">
	        		{{scope.row.status == 1?'已启用':'未启用'}}
	        	</template>
	        </el-table-column>
	        <el-table-column label="操作" align="center" width="260">
	             <template slot-scope="scope">
	                <el-button v-if="scope.row.status !== 1" type="text" @click="operation('start',scope.row)">启用</el-button>
	                <el-button type="text" v-if="scope.row.status == 1"  @click="operation('recall',scope.row)">撤回</el-button>
	                <el-button type="text" :disabled="scope.row.status ==1" @click="operation('edit',scope.row)">编辑</el-button>
	                <el-button type="text" @click="operation('info',scope.row)">详情</el-button>
	                <el-button  :disabled="scope.row.status == 1 || scope.row.status == 3" type="text" @click="operation('del',scope.row)">删除</el-button>
	             </template> 
	        </el-table-column>
	    </el-table>

	    <div class="pagebar">
	        <el-pagination
	                background
	                layout="total, sizes, prev, pager, next"
	                :current-page.sync="ruleForm.pageNum"
	                :page-sizes="[10, 20, 30, 40]"
	                :page-size="ruleForm.pageSize"
	                @size-change="handleSizeChange"
	                @current-change="handleCurrentChange"
	                :total="totalSize">
	        </el-pagination>
	    </div>
		<el-dialog
		  title="查看"
		  :visible.sync="centerDialogVisible"
		  width="37%"
		  center>
		  <div style="max-height: 450px;overflow-y: auto;">
		  	<el-table :data="tableinfo" border>
		  	    <el-table-column label="利润计算区间" :formatter="initinterval" prop="profitBegin" align="center">
		  	    </el-table-column>
		  	    <el-table-column label="利润分配" prop="profitProportion"  align="center">
					<template slot-scope="scope">
						{{scope.row.profitProportion}}{{infobase.dividendUnit==1?'%':'元'}}
					</template>
		  	    </el-table-column>
		  	    <el-table-column label="激励基数" prop="profitBase" align="center">
		  	    	<template slot-scope="scope">
		  	    		{{scope.row.profitBase==1?'营收业绩':''}}
		  	    	</template>
		  	    </el-table-column>
		  	    <el-table-column label="激励分配" prop="distributionProportion" align="center">
					<template slot-scope="scope">
						{{scope.row.distributionProportion}}{{infobase.dividendUnit==1?'%':'元'}}
					</template>
		  	    </el-table-column>
		  	</el-table>

		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="centerDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>
<script>
	
	import api from '@/api/apiPath'
	export default {
		name:'dividendRule',
		title:'分红结算规则',
	    data() {
	        return {
	            ruleForm: {
	                name: undefined,
	                pageNum: 1,
	                pageSize: 10,
	            },
	            totalSize: 0,
	            tableData: [],
	            tableinfo:[],
	            centerDialogVisible: false,
	            infobase:undefined,
	        }
	    },
	    created() {
	        this.getlist()
	    },
	    activated(){
			this.searchList()
	    },
	    methods: {
			initinterval(row, column, cellValue, index){
			    let str =''
			    if (!row.profitBegin) {
			        str = '<'+row.profitEnd + (this.infobase.type==1?'%':'元')
			    }else if(row.profitBegin && row.profitEnd){
			        str =  row.profitBegin +(this.infobase.type==1?'%':'元')+'(含) -'+ row.profitEnd+(this.infobase.type==1?'%':'元')+'(不含）'
			    }else if(!row.profitEnd){
			        str = '≥'+row.profitBegin+(this.infobase.type==1?'%':'元')
			    }
			    return str
			},
	    	handleCurrentChange() {
	    	    this.getlist()
	    	},
	    	handleSizeChange(val) {
	    	    this.ruleForm.pageSize = val
	    	    this.getlist();
	    	},
	    	searchList(){
	    	    this.ruleForm.pageNum = 1
	    	    this.getlist()
	    	},
	    	add(){
	    		this.$router.push({path:'/dividendRuleDetail',query:{pagetype:'add'}})
	    	},
	    	getlist(){
	    		this.axios.post(api.SHAREPAGELIST,this.ruleForm).then((res)=>{
	    			if (res.data.code == 200) {
	    				this.tableData = res.data.data.list
	    				this.totalSize = res.data.data.total
	    			}
	    		})
	    	},
	    	operation(type,val){
	    		//start 启用 recall撤回 edit 编辑 info详情 del删除 lookinterval查看区间
	    		if (type == 'start') {
					this.$confirm('是否启用该规则?', '提示', {
						  confirmButtonText: '确定',
						  cancelButtonText: '取消',
						  type: 'warning',
						  center: true
						}).then(() => {
							this.axios.get(api.INVESTSHAREOPEN+val.id).then((res)=>{
								if (res.data.code == 200) {
									this.$message({
									  type: 'success',
									  message: '启用成功'
									});    
									this.getlist()
								}
							})
						}).catch(() => {
						  this.$message({
						    type: 'info',
						    message: '已取消'
						  });          
					});
	    		}else if(type == 'recall'){
					this.$confirm('是否撤回该规则?', '提示', {
						  confirmButtonText: '确定',
						  cancelButtonText: '取消',
						  type: 'warning',
						  center: true
						}).then(() => {
							this.axios.get(api.INVESTSHARERECALL+val.id).then((res)=>{
								if (res.data.code == 200) {
									this.$message({
									  type: 'success',
									  message: '撤回成功'
									});    
									this.getlist()
								}
							})
						}).catch(() => {
						  this.$message({
						    type: 'info',
						    message: '已取消'
						  });          
					});
	    		}else if(type == 'edit'){
	    			this.$router.push({path:'/dividendRuleDetail',query:{pagetype:'edit',id:val.id}})
	    		}else if(type == 'info'){
	    			this.$router.push({path:'/dividendRuleInfo',query:{id:val.id}})
	    		}else if(type == 'del'){
	    			this.$confirm('是否删除该规则?', '提示', {
	    				  confirmButtonText: '确定',
	    				  cancelButtonText: '取消',
	    				  type: 'warning',
	    				  center: true
	    				}).then(() => {
	    					this.axios.get(api.INVESTSHAREDELETE+val.id).then((res)=>{
	    						if (res.data.code == 200) {
	    							this.$message({
	    							  type: 'success',
	    							  message: '删除成功'
	    							});   
	    							this.getlist()
	    						}
	    					})
	    				}).catch(() => {
	    				  this.$message({
	    				    type: 'info',
	    				    message: '已取消'
	    				  });          
	    			});
	    		}else if(type == 'lookinterval'){
	    			this.centerDialogVisible = true
	    			this.tableinfo =[]
	    			this.axios.get(api.INVESTSECTIONS+'/'+val.id).then((res)=>{
	    				if (res.data.code == 200) {
	    					this.tableinfo = res.data.data.shareDateail
	    					this.infobase = res.data.data.shareOut
	    				}
	    			})
	    		}
	    		
	    	}

	    }
	}

</script>

<style lang="stylus">

</style>